<div class="{% if section.settings.include_margins %}page-width{% endif %}">
     <div class="product-with-image fill-width">
       <div class="product-text">
         <div class="text page-width">
           {% if section.settings.heading !=blank %}
             <h4>{{ section.settings.heading }}</h4>
           {% endif %}
           {% if section.settings.text !=blank %}
             <div>{{ section.settings.text }}</div>
           {% endif %}
         </div>
       </div>
       <div class="bg-image">
         <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
         {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
       >
         {%- if section.settings.image != blank -%}
           <img
             srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
               {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
               {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
               {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
               {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
               {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
               {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
               {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
             src="{{ section.settings.image | img_url: '1500x' }}"
             sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
             alt="{{ section.settings.image.alt | escape }}"
             loading="lazy"
             class="lazyload"
             width="{{ section.settings.image.width }}"
             height="{{ section.settings.image.height }}"
           >
         {%- else -%}
           {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
         {%- endif -%}
         </div>
         <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
         {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
       >
         {%- if section.settings.image_mobile != blank -%}
           <img
             srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
               {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
               {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
               {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
               {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
               {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
               {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
               {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
             src="{{ section.settings.image_mobile | img_url: '1500x' }}"
             sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
             alt="{{ section.settings.image_mobile.alt | escape }}"
             loading="lazy"
             class="lazyload"
             width="{{ section.settings.image_mobile.width }}"
             height="{{ section.settings.image_mobile.height }}"
           >
         {%- else -%}
           {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
         {%- endif -%}
         </div>
       </div>
       <div class="product-riders">
        <div class="page-width">
         {% if section.settings.Paragraph !=blank %}
         <div>{{ section.settings.Paragraph }}</div>
       {% endif %}
        </div>
       </div>
     </div>
   </div>
   
   {% schema %}
   {
     "name": "Background product",
     "tag": "section",
     "class": "spaced-section background-images",
     "settings": [
       {
         "type": "checkbox",
         "id": "include_margins",
         "default": true,
         "label": "t:sections.apps.settings.include_margins.label"
       },
       {
         "type": "image_picker",
         "id": "image",
         "label": "Image"
       },
       {
         "type": "image_picker",
         "id": "image_mobile",
         "label": "Mobile image"
       },
       {
         "type": "text",
         "id": "heading",
         "default": "heading",
         "label": "Heading"
       },
       {
         "type": "richtext",
         "id": "text",
         "label": "Paragraph"
       },
       {
         "type": "text",
         "id": "Paragraph",
         "label": "Riders"
       }
     ],
     "presets": [
       {
         "name": "Background product"
       }
     ]
   }
   {% endschema %}
   